<template>
  <div>
    <h2>患者报表</h2>

    <el-row>
      <el-col :span="6">
        <div class="count">
          <div class="p-left">
            <i class="el-icon-user-solid icon"></i>
          </div>
          <div class="tot" v-for="item in reportData">
            <span>患者总数</span>
            <el-button type="text" @click="returnPa" v-if="item.type == 'all'">{{ item.total }}</el-button>
          </div>

        </div>
      </el-col>
      <el-col :span="6">
        <div class="count">
          <div class="f-left">
            <i class="el-icon-edit-outline icon"></i>
          </div>
          <div class="tot" v-for="item in reportData">
            <span>跟进总数</span>
            <el-button type="text"  @click="returnFol" v-if="item.type == 'follow'">{{ item.total }}</el-button>
          </div>

        </div>
      </el-col>
      <el-col :span="6">
        <div class="count">
          <div class="s-left">
            <i class="el-icon-user-solid icon"></i>
          </div>
          <div class="tot" v-for="item in reportData">
            <span>患者公海</span>
            <el-button type="text" @click="returnSeas" v-if="item.type == 'common'">{{ item.total }}</el-button>
          </div>

        </div>
      </el-col>
      <el-col :span="6">
        <div class="count">
          <div class="pr-left">
            <i class="el-icon-s-custom icon"></i>
          </div>
          <div class="tot" v-for="item in reportData">
            <span>私有患者</span>
            <el-button type="text" @click="returnPer" v-if="item.type == 'personal'">{{ item.total }}</el-button>
          </div>

        </div>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="12">
        <div class="followBox" v-show="isShow1">
          <div class="fl-header">
            <span>跟进</span>
            <el-button icon="el-icon-close" class="icon-btn" @click="del1"></el-button>
          </div>
          <!-- <div class="tabCont"></div> -->
          <div id="main" style="width: 100%;height: 300px;"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="followBox" v-show="isShow2">
          <div class="fl-header">
            <span>地区</span>
            <el-button icon="el-icon-close" class="icon-btn"  @click="del2"></el-button>
          </div>
          <!-- <div class="breadCont"></div> -->
          <div id="main2" style="width: 100%;height: 300px;"></div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="annulTab" v-show="isShow3">
          <div>
            <div class="annul-header">
              <span>患者年度报告</span>
              <el-button icon="el-icon-close" class="icon-btn" @click="del3"></el-button>
            </div>

            <div>
              <el-table :data="tableData" height="950" border style="width: 100%">
                <el-table-column prop="date" label="日期" width="180" align="center">
                 
                </el-table-column>
                <el-table-column prop="Jan" label="1月" align="center">
                </el-table-column>
                <el-table-column prop="Feb" label="2月" align="center">
                </el-table-column>
                <el-table-column prop="Mar" label="3月" align="center">
                </el-table-column>
                <el-table-column prop="Ari" label="4月" align="center">
                </el-table-column>
                <el-table-column prop="May" label="5月" align="center">
                </el-table-column>
                <el-table-column prop="Jun" label="6月" align="center">
                </el-table-column>
                <el-table-column prop="Jul" label="7月" align="center">
                </el-table-column>
                <el-table-column prop="Aut" label="8月" align="center">
                </el-table-column>
                <el-table-column prop="Sep" label="9月" align="center">
                </el-table-column>
                <el-table-column prop="Oct" label="10月" align="center">
                </el-table-column>
                <el-table-column prop="Nov" label="11月" align="center">
                </el-table-column>
                <el-table-column prop="Des" label="12月" align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>
<script>
import * as echarts from 'echarts';
import dayjs from 'dayjs';






export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {
      
      //患者报表数据
      reportData: [],

      //患者跟进表数据
      followData: [

      ],
      weekData: {
        Mon: 0,
        Tue: 0,
        Wed: 0,
        Thu: 0,
        Fri: 0,
        Sat: 0,
        Sun: 0,
      },

      //患者区域表
      seasData: [],

      tableData: [
           {date:"1日",Jan:1},
           {date:"2日",},
           {date:"3日",},
           {date:"4日",},
           {date:"5日",},
           {date:"6日",},
           {date:"7日",Mar:5}, 
           {date:"8日",},
           {date:"9日",}, 
           {date:"10日",}, 
           {date:"11日",}, 
           {date:"12日",}, 
           {date:"13日",}, 
           {date:"14日",}, 
           {date:"15日",}, 
           {date:"16日",}, 
           {date:"17日",}, 
           {date:"18日",}, 
           {date:"19日",Feb:8}, 
           {date:"20日",}, 
           {date:"21日",}, 
           {date:"22日",}, 
           {date:"23日",}, 
           {date:"24日",}, 
           {date:"25日",}, 
           {date:"26日",}, 
           {date:"27日",}, 
           {date:"28日",Jan:3}, 
           {date:"29日",}, 
           {date:"30日",}, 
           {date:"31日",}, 
      ],

      isShow1:true,
      isShow2:true,
      isShow3:true,


    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },
  created() {

    this.getPatientsReportData();//报表
    this.getPatientsFollData();//折线图
    this.getPatientsSeas();//饼图
    // this.getPatientsYear();//年度报表

  },
  methods: {
    dayjs,
    //患者报表发起请求
    async getPatientsReportData() {
      let res = await this.$api.patients.getPatientsReport();

      this.reportData = res.data.data
    },
    //患者跟进图
    async getPatientsFollData() {
      let res = await this.$api.patients.getPatientsFoll();
      // console.log(res);
      this.followData = res.data.data
      console.log(this.toWeek());
    },
    //把拿到的日期转化为周几进行数据对比  绑定 传参 绘制折线图
    toWeek() {
      for (let i = 0; i < this.followData.length; i++) {
        let dateList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六',]
        let week = dateList[new Date(this.followData[i].date).getDay()];// 把时间转为周一,周二....
        console.log(week);
        switch (week) {
          case '周一': this.weekData.Mon = this.followData[i].count; break;
          case '周二': this.weekData.Tue = this.followData[i].count; break;
          case '周三': this.weekData.Wed = this.followData[i].count; break;
          case '周四': this.weekData.Thu = this.followData[i].count; break;
          case '周五': this.weekData.Fri = this.followData[i].count; break;
          case '周六': this.weekData.Sat = this.followData[i].count; break;
          case '周七': this.weekData.Sun = this.followData[i].count; break;
        }
      }
      //绘制折线图
      this.line(this.weekData.Mon, this.weekData.Tue, this.weekData.Wed, this.weekData.Thu, this.weekData.Fri, this.weekData.Sat, this.weekData.Sun)

      return this.weekData

    },

    //患者区域表发起请求
    async getPatientsSeas() {
      let res = await this.$api.patients.getPatientsArea();

      res.data.data.forEach((item) => {
        let obj = {};
        if (item.province == '') {
          obj.name = '其他';
        } else {
          obj.name = item.province;
        }
        obj.value = item.count;
        this.seasData.push(obj)
      })
      //绘制饼图
      this.pie(this.seasData)

    },



    //绘制折线图
    line(a, b, c, d, e, f, g) {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '周跟进统计',
          left: 'center'
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value',
          data: ['5', "10", "15", "20", "25", "30"]
        },
        series: [
          {
            data: [a, b, c, d, e, f, g],
            type: 'line',
            smooth: true,//圆滑曲线
            areaStyle: {}
          }
        ]
      };
      option && myChart.setOption(option);

    },

    //绘制饼图
    pie(data) {
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '患者地区统计',

          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },

    //年度报表
    async getPatientsYear(){
      let res=await this.$api.patients.getPatientsYear()
      console.log(res,"---------------");
    },

    //
    returnPa(){
      this.$router.push('/patient/paManage')
    },
    returnFol(){
      this.$router.push("/patient/paFollow")
    },
    returnSeas(){
      this.$router.push("/patient/paSeas")
    },
    returnPer(){
      this.$router.push('/patient/paManage')
    },

    //删除年度报表 
    del1(){
      this.isShow1=false
    },
    del2(){
      this.isShow2=false
    },
    del3(){
      this.isShow3=false
    }
  }
};
</script>
<style scoped>
h2 {
  margin: 10px;
}

.count {
  height: 100px;
  background-color: white;
  margin: 10px;
  position: relative;
}

.p-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #00c0ef;
}

.f-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #dd4b39;
}

.s-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #00a65a;
}

.pr-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #f39c12;
}

.tot {
  position: absolute;
  top: 10px;
  left: 110px;
  display: flex;
  flex-direction: column;
}

.icon {
  font-size: 50px;
  color: white;
  position: absolute;
  left: 25px;
  top: 25px;
}

.followBox {
  height: 300px;
  margin: 10px;
  border-top: 3px solid #ccc;
  background-color: rgb(255, 255, 255);
}

.fl-header {
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-btn {
  border: none;
}

.annulTab {

  margin-left: 10px;
  margin-right: 10px;
  box-sizing: content-box;
}

.annul-header {

  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(255, 255, 255);
  border-top: 3px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>